// stores/theme.ts
import { defineStore } from 'pinia'

// 定义主题模式的类型
type ThemeMode = 'light' | 'dark'

// 定义 localStorage 主题键名
const THEME_KEY = 'theme-mode' as const

// 定义状态接口
interface ThemeState {
  isDarkMode: boolean
}

// 定义主题相关的工具函数
const themeUtils = {
  // 从 localStorage 获取主题
  getStoredTheme(): ThemeMode | null {
    return localStorage.getItem(THEME_KEY) as ThemeMode | null
  },

  // 保存主题到 localStorage
  saveTheme(theme: ThemeMode): void {
    localStorage.setItem(THEME_KEY, theme)
  },

  // 检测系统主题偏好
  getSystemThemePreference(): boolean {
    return window.matchMedia('(prefers-color-scheme: dark)').matches
  }
}

export const useThemeStore = defineStore('theme', {
  state: (): ThemeState => ({
    // 优先使用存储的主题，如果没有则使用系统主题偏好
    isDarkMode: themeUtils.getStoredTheme() === 'dark' ?? themeUtils.getSystemThemePreference()
  }),

  getters: {
    // 获取当前主题模式
    currentTheme(): ThemeMode {
      return this.isDarkMode ? 'dark' : 'light'
    },

    // 获取主题类名
    themeClass(): string {
      return this.isDarkMode ? 'dark-theme' : 'light-theme'
    },

    // 获取主题相关的 CSS 变量
    themeVariables(): Record<string, string> {
      return this.isDarkMode
        ? {
            '--bg-color': '#1a1a1a',
            '--text-color': '#ffffff',
            '--primary-color': '#64b5f6',
            '--secondary-color': '#4a4a4a',
            '--border-color': '#404040'
          }
        : {
            '--bg-color': '#ffffff',
            '--text-color': '#333333',
            '--primary-color': '#4a90e2',
            '--secondary-color': '#f5f5f5',
            '--border-color': '#e0e0e0'
          }
    }
  },

  actions: {
    /**
     * 切换主题模式
     */
    toggleTheme(): void {
      this.isDarkMode = !this.isDarkMode
      themeUtils.saveTheme(this.currentTheme)
      this.updateBodyClass()
      this.updateThemeVariables()
    },

    /**
     * 设置指定的主题模式
     * @param isDark - 是否为暗色主题
     */
    setTheme(isDark: boolean): void {
      this.isDarkMode = isDark
      themeUtils.saveTheme(this.currentTheme)
      this.updateBodyClass()
      this.updateThemeVariables()
    },

    /**
     * 更新 body 类名
     */
    updateBodyClass(): void {
      document.body.classList.toggle('dark', this.isDarkMode)
    },

    /**
     * 更新 CSS 变量
     */
    updateThemeVariables(): void {
      const root = document.documentElement
      Object.entries(this.themeVariables).forEach(([key, value]) => {
        root.style.setProperty(key, value)
      })
    },

    /**
     * 初始化主题
     */
    initTheme(): void {
      this.updateBodyClass()
      this.updateThemeVariables()
      this.setupSystemThemeListener()
    },

    /**
     * 监听系统主题变化
     */
    setupSystemThemeListener(): void {
      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')

      // 处理系统主题变化
      const handleSystemThemeChange = (event: MediaQueryListEvent): void => {
        // 只有当用户没有明确设置主题时，才跟随系统主题
        if (!themeUtils.getStoredTheme()) {
          this.setTheme(event.matches)
        }
      }

      // 添加系统主题变化监听器
      try {
        // 新版 API
        mediaQuery.addEventListener('change', handleSystemThemeChange)
      } catch (e) {
        // 兼容旧版浏览器
        mediaQuery.addListener(handleSystemThemeChange)
      }
    }
  }
})

// 导出类型
export type ThemeStore = ReturnType<typeof useThemeStore>
